<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      @close="sendVisible"
    >
      <div class="dialog_body_contain">
        <div class="left_dialog">
          <div>
            <el-image class="left_top_img" :src="require('../assets/img.png')"></el-image>
          </div>
          <div>
            <el-image class="left_bottom_image" :src="require('../assets/后台首页.png')"></el-image>
          </div>
        </div>
        <div>
          <el-divider direction="vertical"></el-divider>
        </div>
        <div class="right_dialog">
          <div style="height: 200px">
            <el-tabs>
              <el-tab-pane>
                <span slot="label">账户登录</span>
                <el-form v-model="form">
                  <el-form-item>
                    <el-input placeholder="请输入用户名/邮箱" v-model="form.username"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input show-password="show-password" placeholder="请输入密码" v-model="form.password"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-link :underline="false" class="left_link" @click="forgetDialog=true">忘记密码？</el-link>
                    <Forget_Password
                     :forgetDialog.sync="forgetDialog"
                     @getForgetDialog="getForgetDialog"
                    >
                    </Forget_Password>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="left_button" type="primary" @click="login">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane>
                <span slot="label">短信登录</span>
                <el-form v-model="phoneForm">
                  <el-form-item>
                    <el-input placeholder="请输入手机号码" v-model="phoneForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input placeholder="请输入验证码" v-model="phoneForm.yzm"></el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div>
        <el-divider></el-divider>
      </div>
      <div>
        <div class="footer_button">
          <el-button type="primary" icon="el-icon-message" circle></el-button>
          <el-button type="primary" icon="el-icon-message" circle></el-button>
          <el-button type="primary" icon="el-icon-message" circle></el-button>
          <el-link class="footer_link" :underline="false" href="/#/register">立即注册</el-link>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Forget_Password from "./Forget_Password.vue";
export default {
  components:{Forget_Password},
  props:['visibleType'],
    data () {
      return {
        loading: false,
        dialogVisible:false,
        forgetDialog:false,
        form:{
          username:'',
          password:'',
        },
        phoneForm:{
          phone:'',
          yzm:'',
        },
      }
    },
  watch:{
    visibleType(newValue){
      if (newValue===true){
        this.dialogVisible=true
      }
    }
  },
  methods: {
    login() {
      this.loading = true;
      this.$axios.get('api/login/', {
        params: {username:this.form.username,password:this.form.password}
      }).then((response)=>{
        var res = response.data
        if (res['respCode'] === '000000'){
          this.$message.success('登录成功')
          localStorage.setItem('username',this.form.username)
          localStorage.setItem('loginStatus','success')
          location.reload()
          this.dialogVisible=false
          this.$router.push('/')
        }else {
          this.$message.error('用户名或密码错误')
          console.log(res['msg'])
          this.loading = false
        }
      })
    },
    sendVisible() {
      this.$emit('getVisible','false')
    },
    getForgetDialog(val) {
      this.forgetDialog = val
    },
  }
}
</script>
<style scoped>
.left_dialog {
  width: 45%;
  float: left;
}
.right_dialog {
  width: 45%;
  float: right;
  position: relative;
}
.dialog_body_contain {
  height: 280px;
}
.el-dialog__wrapper {
  .el-dialog{
    border-radius: 20px;
  }
  .el-dialog__body {
    padding: 10px;
  }
}
.left_top_img {
  width: 30%;
  height: 30px;
  position: relative;
  top: -20px;
  left: 10px;
}
.left_bottom_image {
  width: 100%;
  height: 200px;
  top: -10px;
  left: 10px;
}
.left_link{
  float: right;
  line-height: 17px;
  color: #5691c8;
}
.left_button {
  line-height: 17px;
  width: 100%;
}
.el-divider--vertical {
  height: 250px;
  float: left;
  left: 30px;
}
.el-divider--horizontal {
  float: left;
  margin: 10px;
}
.footer_button {
  padding-left: 10px;
}
.footer_link {
  float: right;
  top: 10px;
  right: 10px;
  color: #5691c8;
}
</style>
